<template>
  <footer>
    <div style="height: 48px;"></div>
    <ul>
      <li v-for="(item,index) in list" :key="index" :class="{hot:routes === item.pathName}"
          @click="$router.push({name: item.pathName})">
        <i class="icon iconfont" :class="item.icon"></i>
        <p>{{item.name}}</p>
      </li>
    </ul>
  </footer>
</template>
<script>
  export default {
    name: "footer",
    data: () => ({
      list: [
        {name: '首页', pathName: 'home', icon: 'icon-shouye'},
        {name: '券集市', pathName: 'market', icon: 'icon-quanjishi'},
        {name: '发现', pathName: 'find', icon: 'icon-faxian'},
        {name: '我的', pathName: 'center', icon: 'icon-wode'},
      ]
    }),
    computed: {
      routes() {
        return this.$route.name
      }
    }
  }
</script>
<style lang="scss" scoped>
  footer > ul {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    font-size: 0.8rem;
    z-index: 99;
    box-shadow: -4px 0px 4px rgba(0, 0, 0, 0.05), //左边
    0px -7px 10px rgba(0, 0, 0, 0.04), //上
    4px 0px 4px rgba(0, 0, 0, 0.05), //右
    0px 4px 4px rgba(0, 0, 0, 0.05); //下
  }

  footer > ul > li {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 0.2rem;
    font-size: 0.8rem;
  }

  footer ul p {
    color: #a5a5a5;
  }

  footer i.iconfont {
    font-size: 1.6rem;
    color: #a5a5a5;
  }

  footer li.hot i.iconfont {
    color: #ec4e8a;
  }

  footer li.hot p {
    color: #ec4e8a;
  }
</style>
